<template>
	<view>
		<view class="dianpu-list">
			<view class="dianpu-item" v-for="dianpu in dianpuList" :key="dianpu.id">
				<view class="dianpu-header">
					<view class="left">
						<view class="dianpu-img">
							<image class="head-img" :src="dianpu.member.avatar" mode="widthFix"></image>
						</view>
						<view class="dianpu-title">{{ dianpu.name }}</view>
					</view>
					<view class="right">
						<view class="btn-r" @tap="gotoDianpu(dianpu.id)">进店</view>
					</view>
				</view>

				<view class="goods-list">
					<view class="goods-item" v-for="goods in dianpu.goods" :key="goods.id" @tap="gotoGoodsDetail(goods.id, dianpu.id)">
						<view class="goods-img">
							<image :src="goods.image" mode="widthFix"></image>
						</view>
						<view class="goods-price"><text class="unit">￥</text><text class="num">{{ goods.price }}</text></view>
					</view>
				</view>
			</view>
			
			<!-- 缺省页 -->
			<shopro-empty v-show="isEmpty" marginTop="50rpx" :image="$IMG_URL + '/imgs/empty/no_team.png'" tipText="暂无店铺"></shopro-empty>
			<!-- 更多 -->
			<u-loadmore v-if="dianpuList.length" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dianpuList: [],
				isEmpty: false,
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				total: 0,
			}
		},
		onLoad() {
			this.getDianpuList();
		},
		methods: {
			getDianpuList() {
				let that = this;
				uni.showLoading();
				this.loadStatus = 'loadmore';
				that.$http('dianpu.lists', {
				    page: that.currentPage,
				}).then(res => {
					uni.hideLoading();
				    if (res.code === 1) {
				        that.dianpuList = [...that.dianpuList, ...res.data.data];
				        that.isEmpty = !that.dianpuList.length;
				        that.lastPage = res.data.last_page;
				        that.loadStatus = that.currentPage < that.lastPage ? 'loadmore' : 'nomore';
				    }
				});
			},
			
			gotoDianpu(id) {
				this.jump('/pages/dianpu/index', { id: id })
			},
			gotoGoodsDetail(goodsId, dianpuId) {
				this.jump('/pages/dianpu/goods-detail', { id: goodsId, dianpu_id: dianpuId });
			},

			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			loadMore() {
				if (this.loadStatus !== 'nomore') {
					this.currentPage += 1;
					this.getList();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{ background: #f5f5f5;}

	.dianpu-list{
		padding:10rpx;
	}

	.dianpu-item{
		background: #fff;
		border-radius:10rpx;
		overflow:hidden;
		margin:10rpx;

		.dianpu-header{
			display:flex;
			justify-content: space-between;
			align-items: center;
			padding:20rpx;
			.left{
				display:flex;
				justify-content: flex-start;
				align-items: center;
				.dianpu-img{
					border-radius:6rpx;
					overflow:hidden;
					margin-right:20rpx;
					width:60rpx;
					height:60rpx;
					display:flex;
					align-items: center;
					justify-content: center;
					background: #f5f5f5;
				}
				.dianpu-title{
					font-size:28rpx;
					font-weight: bold;
					color:#555;
				}	
			}
			.right{
				.btn-r{
					padding:6rpx 20rpx;
					color:#dd0000;
					border-radius:100rpx;
					font-size:24rpx;
					border:1rpx solid #dd0000
				}
			}
		}

	    .goods-list{
			display:flex;
			align-items: center;
			justify-content: flex-start;
			padding:0 10rpx;

			.goods-item{
				width:210rpx;
				margin:0 10rpx;
				border-radius:10rpx;
				.goods-img{
					width:210rpx;
					height:210rpx;
					display:flex;
					align-items: center;
					justify-content: center;
					background: #f5f5f5;
				}
				.goods-price{
					padding:20rpx 0;
					font-size:24rpx;
					font-weight:bold;
					color:#555;
				}
			}
		}
	}
    
</style>
